<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Mermaid"><meta property="og:title" content="" />
<meta property="og:description" content="Mermaid Chart Mermaid is library for generating svg charts and diagrams from text.
Example {{&lt; mermaid [class=&#34;text-center&#34;]&gt;}}sequenceDiagramAlice-&gt;&gt;Bob: Hello Bob, how are you?alt is sickBob-&gt;&gt;Alice: Not so good :(else is wellBob-&gt;&gt;Alice: Feeling fresh like a daisyendopt Extra responseBob-&gt;&gt;Alice: Thanks for askingend{{&lt; /mermaid &gt;}}sequenceDiagramAlice-Bob: Hello Bob, how are you?alt is sickBob-Alice: Not so good :(else is wellBob-Alice: Feeling fresh like a daisyendopt Extra responseBob-Alice: Thanks for askingend" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://anqicat.gitee.io/doctest/docs/shortcodes/mermaid/" />

<title>Mermaid | Hugo Book</title>
<link rel="icon" href="/doctest/favicon.png" type="image/x-icon">


<link rel="stylesheet" href="/doctest/book.min.b7fe34b8a4c4da05b2690b4aacfa71ddce0668cc6da3abb67dd3946844125444.css" integrity="sha256-t/40uKTE2gWyaQtKrPpx3c4GaMxto6u2fdOUaEQSVEQ=">


<script defer src="/doctest/en.search.min.9b7f7adbc9ff5cdeb7c8c172b68e544523a3c9a35896de2d296ba8fe913505ab.js" integrity="sha256-m39628n/XN63yMFyto5URSOjyaNYlt4tKWuo/pE1Bas="></script>

<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
-->

  
</head>

<body>
  <input type="checkbox" class="hidden" id="menu-control" />
  <main class="container flex">
    <aside class="book-menu">
      
  <nav>
<h2 class="book-brand">
  <a href="/doctest"><span>Hugo Book</span>
  </a>
</h2>


<div class="book-search">
  <input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
  <div class="book-search-spinner spinner hidden"></div>
  <ul id="book-search-results"></ul>
</div>





  

  
  





 
  
    




  
  <ul>
    
      
        

  <li  class="book-section-flat" >
    
      

  <a href="/doctest/docs/example/" >
      Example Site
  </a>


    

    




  
  <ul>
    
      
        

  <li >
    
      

  <a href="/doctest/docs/example/table-of-contents/" >
      Docs\example\table of Contents\
  </a>


    

    




  
  <ul>
    
      
        <li>

  <a href="/doctest/docs/example/table-of-contents/with-toc/" >
      With ToC
  </a>

</li>
      
    
      
        <li>

  <a href="/doctest/docs/example/table-of-contents/without-toc/" >
      Without ToC
  </a>

</li>
      
    
  </ul>
  



  </li>


      
    
      
        

  <li >
    
      

  <a href="/doctest/docs/example/2nd/" >
      Docs\example\2nd\
  </a>


    

    






  </li>


      
    
  </ul>
  



  </li>


      
    
      
        

  <li  class="book-section-flat" >
    
      <span>Docs\shortcodes\</span>
    

    




  
  <ul>
    
      
        <li>

  <a href="/doctest/docs/shortcodes/buttons/" >
      Buttons
  </a>

</li>
      
    
      
        <li>

  <a href="/doctest/docs/shortcodes/columns/" >
      Columns
  </a>

</li>
      
    
      
        <li>

  <a href="/doctest/docs/shortcodes/expand/" >
      Expand
  </a>

</li>
      
    
      
        <li>

  <a href="/doctest/docs/shortcodes/hints/" >
      Hints
  </a>

</li>
      
    
      
        <li>

  <a href="/doctest/docs/shortcodes/katex/" >
      Katex
  </a>

</li>
      
    
      
        <li>

  <a href="/doctest/docs/shortcodes/mermaid/"  class="active">
      Mermaid
  </a>

</li>
      
    
      
        <li>

  <a href="/doctest/docs/shortcodes/tabs/" >
      Tabs
  </a>

</li>
      
    
  </ul>
  



  </li>


      
    
  </ul>
  



  











</nav>


<script>
(function() {
  var menu = document.querySelector("aside.book-menu nav");
  addEventListener("beforeunload", function(event) {
    localStorage.setItem("menu.scrollTop", menu.scrollTop);
  });
  menu.scrollTop = localStorage.getItem("menu.scrollTop");
})();
</script>

 
    </aside>

    <div class="book-page">
      <header class="book-header">
        
  <div class="flex align-center justify-between">
  <label for="menu-control">
    <img src="/doctest/svg/menu.svg" class="book-icon" alt="Menu" />
  </label>

  <strong>Mermaid</strong>

  <label for="toc-control">
    <img src="/doctest/svg/toc.svg" class="book-icon" alt="Table of Contents" />
  </label>
</div>


  
    <input type="checkbox" class="hidden" id="toc-control" />
    <aside class="hidden clearfix">
      
  <nav id="TableOfContents">
  <ul>
    <li><a href="#mermaid-chart">Mermaid Chart</a>
      <ul>
        <li><a href="#example">Example</a></li>
      </ul>
    </li>
  </ul>
</nav>


    </aside>
  
 
      </header>

      
<article class="markdown"><h1 id="mermaid-chart">Mermaid Chart</h1>
<p><a href="https://mermaidjs.github.io/">Mermaid</a> is library for generating svg charts and diagrams from text.</p>
<h2 id="example">Example</h2>
<div class="book-columns flex flex-wrap">
  
  <div class="flex-even markdown-inner">
    <div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tpl" data-lang="tpl"><span style="color:#75715e">{</span><span style="color:#75715e">{</span><span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">mermaid</span> <span style="color:#f92672">[</span><span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text-center&#34;</span><span style="color:#f92672">]</span><span style="color:#f92672">&gt;</span><span style="color:#75715e">}</span><span style="color:#75715e">}</span>
sequenceDiagram
    Alice-&gt;&gt;Bob: Hello Bob, how are you?
    alt is sick
        Bob-&gt;&gt;Alice: Not so good :(
    else is well
        Bob-&gt;&gt;Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob-&gt;&gt;Alice: Thanks for asking
    end
<span style="color:#75715e">{</span><span style="color:#75715e">{</span><span style="color:#f92672">&lt;</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">mermaid</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}</span><span style="color:#75715e">}</span>
</code></pre></div>
  </div>
  
  <div class="flex-even markdown-inner">
    <script src="/doctest/mermaid.min.js"></script>
<p class="mermaid">
sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end
  </div>
  
</div>

</article>
 

      <footer class="book-footer">
        
  <div class="flex justify-between">

  


  

  

  



<div class="book-languages">

  <ul>
    <li class="flex">
      <img src="/doctest/svg/translate.svg" class="book-icon" alt="Languages" />
      English
    </li> 
  </ul>

  <ul class="book-languages-list">
    
    <li class="">
      <a href="https://anqicat.gitee.io/doctest/cn/" class="flex">
        <img src="/doctest/svg/translate.svg" class="book-icon" alt="Languages" />
        Chinese
      </a>
    </li>
    
    <li class="active">
      <a href="https://anqicat.gitee.io/doctest/" class="flex">
        <img src="/doctest/svg/translate.svg" class="book-icon" alt="Languages" />
        English
      </a>
    </li>
    
    <li class="">
      <a href="https://anqicat.gitee.io/doctest/ru/" class="flex">
        <img src="/doctest/svg/translate.svg" class="book-icon" alt="Languages" />
        Russian
      </a>
    </li>
    
  </ul>

</div>




  <div>
    
    <a class="flex align-center" href="https://github.com/alex-shpak/hugo-book/commit/0f144096a352f07896ecf22c64ee951e2fd8fe6b" title='Last modified by 0x3A2B | Jan 26, 2020' target="_blank" rel="noopener">
      <img src="/doctest/svg/calendar.svg" class="book-icon" alt="Calendar" />
      <span>Jan 26, 2020</span>
    </a>
  </div>



  <div>
    <a class="flex align-center" href="https://github.com/alex-shpak/hugo-book/edit/master/exampleSite/content/docs/shortcodes/mermaid.md" target="_blank" rel="noopener">
      <img src="/doctest/svg/edit.svg" class="book-icon" alt="Edit" />
      <span>Edit this page</span>
    </a>
  </div>

</div>

 
        
  
  <div class="book-comments">

</div>
  
 
      </footer>
      
    </div>

    
    <aside class="book-toc">
      
  <nav id="TableOfContents">
  <ul>
    <li><a href="#mermaid-chart">Mermaid Chart</a>
      <ul>
        <li><a href="#example">Example</a></li>
      </ul>
    </li>
  </ul>
</nav>

 
    </aside>
    
  </main>

  
</body>

</html>












